个人主页搭建
# 初步搭建
Vuepress官网-快速上手 (opens new window)
# 基本配置
在docs目录下创建.vuepress目录，并在.vuepress下添加config.js文件，内容是：
module.exports = {
// 添加标题和描述
title: "MY BLOG",
description: "description of my blog",
themeConfig: {
// 顶部导航栏
nav: [
{ text: "首页", link: "/" },
{ text: "CSDN", link: "" },
{ text: "Github", link: "" },
],
// 侧边栏
sidebar: []
},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
这样我们就有一个有模有样的主页模板了！
# 页面部署
部署到 GithubPages
Vuepress官网-部署 (opens new window)
在项目 vuepress-starter 目录下建立一个脚本文件：deploy.sh，注意修改一下对应的用户名和仓库名：
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run docs:build
# 进入生成的文件夹
cd docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:yourname/yourrepository.git main:gh-pages
cd -
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
然后命令行切换到 vuepress-starter 目录下，执行 sh deploy.sh，就会开始构建，然后提交到远程仓库，注意这里提交到了 gh-pages 分支，我们查看下对应仓库分支的代码：
# 插件使用
# 修改颜色
创建.vuepress/styles/palette.styl文件，文件代码如下：
$accentColor = #3178c6
1
# 侧边栏自动生成 (opens new window)
# katex数学公式支持 (opens new window)
# 代码复制 (opens new window)
# 代码行号
module.exports = {
markdown: {
lineNumbers: true
},
}
1
2
3
4
5
2
3
4
5
# 代码折叠
正在写:)
# 导航栏图标：
我没配置呀？为啥自动给我使用github头像了？怪事
# 参考文献
Vuepress-Get Started (opens new window)